<!--
 * @Author: your name
 * @Date: 2019-12-15 15:19:01
 * @LastEditTime: 2020-08-11 15:21:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /mimall/src/components/NavHeader.vue
 -->
<template>
  <div>
    <div class="header">
      <div class="nav-header">
        <div class="container">
          <div class="header-logo">
            <a href="/#/index"></a>
          </div>
          <div class="header-menu">
            <div class="item-menu" v-for="item in menu" :key="item.id">
              <router-link :to="{path: item.url, query: {type: item.code}}">
                <span>{{item.name}}</span>
                <div class="children" v-if="item.childrenCatalogList.length > 0">
                  <ul>
                    <li class="product" v-for="subItem in item.childrenCatalogList" :key="subItem.id">
                      <router-link :to="{path: subItem.url, query: {type: subItem.code}}" target="_blank">
                        <!-- <div class="pro-img">
                          <img :src="item.mainImage" alt="">
                        </div> -->
                        <div class="pro-name">{{subItem.name}}</div>
                        <!-- <div class="pro-price">{{item.price | currency}}元</div> -->
                      </router-link>
                    </li>
                  </ul>
                </div>
              </router-link>
            </div>
            <!-- <div class="item-menu">
              <router-link :to="{name: 'about', params: {title: '关于我们'}}">
                <span>关于我们</span>
              </router-link>
            </div>
            <div class="item-menu">
              <router-link :to="{name: 'news', params: {title: '新闻中心'}}">
                <span>新闻中心</span>
              </router-link>
            </div>
            <div class="item-menu">
              <router-link :to="{name: 'productList', params: {title: '产品技术'}}">
                <span>产品技术</span>
              </router-link>
            </div>
            <div class="item-menu">
              <span>合作伙伴</span>
            </div>
            <div class="item-menu">
              <span>人才招聘</span>
            </div>
            <div class="item-menu">
              <router-link :to="{name: 'comment', params: {title: '留言反馈'}}">
                <span>留言反馈</span>
              </router-link>
            </div>
            <div class="item-menu">
              <span>联系我们</span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-box">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item in slider" :key="item.id">
          <a :href="'/#/product/' + item.id">
            <img :style="{height: '500px'}" :src="`http://hlb521168.picp.io/layui/download?filepath=${item.url}`" alt="">
          </a>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

// const url = 'http://hlb521168.picp.io/layui/download?filepath='

export default {
  name: 'nav-header',
  components: {
    swiper,
    swiperSlide,
  },
  data () {
    return {
      url: 'http://hlb521168.picp.io/layui/download?filepath=',
      phoneList: [],
      swiperOption: {
        autoplay: true,
        loop: true,
        effect: 'cube',
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      },
      slideList: [
        {
          id: '42',
          img: '/images/slider/slide-1.jpg'
        },
        {
          id: '45',
          img: '/images/slider/slide-2.jpg'
        },
        {
          id: '46',
          img: '/images/slider/slide-3.jpg'
        },
        {
          id: '47',
          img: '/images/slider/slide-1.jpg'
        },
        {
          id: '43',
          img: '/images/slider/slide-1.jpg'
        }
      ],
    }
  },
  props: {
    slider: {
      type: Array,
      default: () => {
        return []
      }
    },
    menu: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  @import '../assets/scss/base.scss';
  @import '../assets/scss/mixin.scss';
  @import '../assets/scss/config.scss';

  .header{
    .nav-header{
      .container{
        position: relative;
        height: 112px;
        @include flex(space-around);
        
        .header-menu{
          display: flex;
          justify-content: space-around;
          flex-grow: 1;
          .item-menu{
            display: inline-block;
            font-size: 16px;
            color: #333;
            line-height: 112px;
            margin-right: 20px;
            span{
              cursor: pointer;
            }
            &:hover{
              color: $colorA;
              .children{
                height: 220px;
                opacity: 1;
              }
            }
            .children{
              position: absolute;
              top: 112px;
              left: 0;
              width: 1226px;
              height: 0;
              opacity: 0;
              overflow: hidden;
              border-top: 1px solid #e5e5e5;
              box-shadow: 0 7px 6px 0 rgba(0, 0, 0, 0.11);
              z-index: 10;
              transition: all .5s;
              background-color: #fff;
              .product{
                position: relative;
                float: left;
                width: 16.6%;
                height: 220px;
                font-size: 12px;
                line-height: 12px;
                text-align: center;
                
                a{
                  display: inline-block;
                }
                img{
                  height: 111px;
                  width: auto;
                  margin-top: 26px;
                }
                .pro-img{
                  height: 137px;
                }
                .pro-name{
                  font-weight: bold;
                  margin-top: 19px;
                  margin-bottom: 8px;
                  color: $colorB;
                }
                .pro-price{
                  color: $colorA;
                }
                &:before{
                  position: absolute;
                  top: 28px;
                  right: 0;
                  border-left: 1px solid $colorF;
                  height: 100px;
                  width: 1px;
                }
                &:last-child:before{
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .swiper-box{
      .swiper-container{
        height: 451px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
